<template>
	<view @click="$emit('click')" :style="customStyle" class="ag-input">
		<input @input="onTextChange" v-if="!textarea" :class="[readonly ? 'readonly' :'']" :value="value" :placeholder="placeholder"
		 :type="type" :disabled="disabled" @blur="onBlur" @click="onClick" />
		<textarea @input="onTextChange" v-else :value="value" :placeholder="placeholder" />
		<slot v-if="!icon && !dropdown"></slot>
		<view class="ag-input__icon" v-if="icon"  >
		  <image mode="aspectFill"  v-if="icon === 'calender'" src="../../static/img/icon-calender.png" @click="clickCalender" />
		  <image mode="aspectFill"  v-if="icon === 'qrcode'" src="../../static/img/icon-qrcode.png" @click="clickQrcode"/>
		  <image mode="aspectFill" v-if="icon === 'search'" src="../../static/img/icon-search.png" @click="clickSearch"/>
		</view>
		<view class="ag-input__dropdown" v-if="dropdown" @click.stop="onDropDownClick">
		  <image src="../../static/img/icon-dropdown.png" />
		</view>
        <view v-if="required" style="color: #DD524D;">*</view>
	</view>
</template>
<script>
export default {
  props: {
	 required:{
		type: Boolean,
		default:false
	}, 
    readonly: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: '' // 支持  二维码:qrcode  日历:calender
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: '',
    },
    dropdown: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    textarea: {
      type: Boolean,
      default: false
    },
    customStyle: {
      type: String,
      default: ''
    },
	disabled:{
		type:Boolean,
		default:false
	},
  },
  methods:{
	clickCalender(e){
		this.$emit('openCalender',e);
	},
    onTextChange(ev){
		this.$emit('change', ev.detail.value);
    },
	clickQrcode(e){
		this.$emit('openQrcode',e);
	},
	clickSearch(e){
		this.$emit('openSearch',e);
	},
	onBlur(e){
		this.$emit('onBlur',e);
	},
	onDropDownClick(e){
		//debugger;
		this.$emit("dropDownClick",e)
	},
	onClick(e){
		this.$emit('onClick',e);
	}
  }
}
</script>
<style lang="scss">
.ag-input{

	background-color: #eeeeee;
  border-radius: 4rpx;
  margin: 20rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;

  textarea{
    flex: 1;
    font-size: 20rpx;
    padding: 15rpx 20rpx;
    height: 200rpx;

    &::placeholder{
      color: #808080;
      font-size: 20rpx;
    }
    &.readonly{
      pointer-events: none;
    }
  }

  input{
    flex: 1;
    font-size: 20rpx;
    padding: 0 20rpx;
    height: 58rpx;
    min-height: 58rpx;
    
    &::placeholder{
      color: #808080;
      font-size: 20rpx;
    }
    &.readonly{
      pointer-events: none;
    }
  }
  &__dropdown{
    width: 60rpx;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    &::after{
      content: "";
      left: 0;
      width: 1px;
      height: 25rpx;
      background-color: #404040;
      position: absolute;
      transform: scaleX(.5);
    }
    image{
      width: 20rpx;
      height: 17rpx;
    }
  }
  &__icon{
    width: 60rpx;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    image{
      width: 30rpx;
      height: 30rpx;
    }
  }
}
</style>
